<template>
  <div  class="htmlCon">
      <div>
          <div>
              <div >
                  <el-collapse  :class="moods" v-model="activeName" accordion>
                    <el-collapse-item title="初次相遇CSS" name="1" disabled>
                        <div><i class="iconfont icon-css"></i><h2>常用选择器</h2></div>
                        <h3>class选择器（最常用的）</h3>
                        <h4>示例：</h4>
                        <p>有这么一个容器&lt;div class="box&gt;&lt;/div&gt;</p>
                        <p>.box{ } 选中class为box的容器 </p>
                        <h3>id选择器</h3>
                        <p>有这么一个容器&lt;div id="box&gt;&lt;/div&gt;</p>
                        <p>#box{ } 选中id为box的容器 </p>
                        <h3>元素选择器</h3>
                        <p>有这么一个容器&lt;div&gt;&lt;/div&gt;</p>
                        <p>选中它 div{ }</p>
                        <div><i class="iconfont icon-css"></i><h2>基本样式</h2></div>
                        <h4>宽度：width: 1px;</h4>
                        <h4>高度：height: 1px;</h4>
                        <h4>行高：line-height: height;</h4>
                        <div style="text-align: right;">
                            <small>注：单位 px、em、%，写法：冒号分号</small>
                        </div>
                        <el-divider></el-divider>
                        <div><i class="iconfont icon-css"></i><h2>文字样式</h2></div>
                        <h4>文字大小：font-size: 1px;</h4>
                        <h4>文字颜色: color: color;</h4>
                        <h4>文字加粗: font-weight: bold/lighter; 粗体/细体</h4>
                        <h4>文字字体: font-family: "宋体";</h4>
                        <h4>文字首行缩进: text-indent: 2em; 首行两个字符</h4>
                        <h4>文字阴影: text-shadow: 5px 5px 5px #FF0000; 水平/垂直/模糊程度/颜色</h4>
                        <h4>文字对齐：text-align: left/center/right; 左对齐/居中/右对齐</h4>
                         <!-- <img :src="fontSize" >
                        <img :src="fontShow"> -->
                        <div style="text-align: right;">
                            <small>注：颜色单位可以是十六进制颜色比如#000000或者英文单词black</small>
                        </div>
                        <el-divider></el-divider>
                        <div><i class="iconfont icon-css"></i><h2>容器样式</h2></div>
                        <h4>背景颜色：background-color: black;</h4>
                        <h4>边框：border:1px solid black; 边框大小/边框样式solid实线/边框颜色</h4>
                        <h4>圆角：border-radius: 0px 0px 0px 0px ; 值：上右下左</h4>
                        <h4>背景颜色：background-color: black;</h4>
                        <!-- <img :src="divStyle"> -->
                        <div style="text-align: right;">
                            <small>注：颜色单位可以是十六进制颜色比如#000000或者英文单词black</small>
                        </div>
                        <el-divider></el-divider>
                        <div><i class="iconfont icon-css"></i><h2>元素也有行为?</h2></div>
                        <h4>display属性：display: inline-block; 这里可取none、inline、inline-block、block、flex</h4>
                        <p>他们是做什么的呢? none：将元素隐藏、inline：将元素变为行级元素、inline-block行级块元素、block块元素、flex弹性盒模型</p>
                        <h4>透明属性：opacity: 0.5; 元素透明取值 0-1</h4>
                        <h4>元素过渡：transition: 1s; 设从0到1需要多久，单位s，例：1s</h4>
                        <el-divider></el-divider>
                        <div><i class="iconfont icon-css"></i><h2>定位</h2></div>
                        <h4>浮动：float: left/right; 左浮动/右浮动</h4>
                        <h4>定位：position: absolute; 常用取值：absolute、relative、fixed</h4>
                        <div style="text-align: right;">
                            <small>注：脱离文档</small>
                        </div>
                        <el-divider></el-divider>
                        <div><i class="iconfont icon-css"></i><h2>动画</h2></div>
                        <h4>动画：animation:move 1s linear ; 动画名/动画时间/行为</h4>
                        <h4>绑定动画： @keyframes name{ to{动画的起始位置}from{动画的结束位置}}</h4>
                    </el-collapse-item>
                    </el-collapse>
              </div>
          </div>
       
      </div>
         <div>
              <div class="htmlNav">
                <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="22">
                    <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#ddd">
                        <el-menu-item index="1" @click="commonly">
                        <span slot="title">常用选择器</span>
                        </el-menu-item>
                        
                        <el-menu-item index="2" @click="basicStyle">
                        <span slot="title">基本样式</span>
                        </el-menu-item>
                        
                        <el-menu-item index="3" @click="fontStyle">
                        <span slot="title">文字样式</span>
                        </el-menu-item>

                        <el-menu-item index="4" @click="containerStyle">
                        <span slot="title">容器样式</span>
                        </el-menu-item>
                        
                        <el-menu-item index="5" @click="behavior">
                        <span slot="title">元素也有行为?</span>
                        </el-menu-item>

                        <el-menu-item index="6" @click="posStyle">
                        <span slot="title">定位</span>
                        </el-menu-item>

                        <el-menu-item index="7" @click="animation">
                        <span slot="title">动画</span>
                        </el-menu-item>
                        <el-menu-item disabled>
                        <span slot="title">持续更新...</span>
                        </el-menu-item>
                        <el-menu-item index="9" @click="top">
                        <span slot="title">返回顶部</span>
                        </el-menu-item>
                    </el-menu>
                    </el-col>
                </el-row>
                </el-aside>
              </div>
          </div>
  </div>
</template>

<script>
export default {
    name: "BasicCSS",
    data(){
        return {
            activeName: ["1"],
            moods: "conWrapper",
            // fontSize,
            // fontShow,
            // divStyle
        }
    },
    methods: {
        commonly(){
            window.scrollTo(100,120);
        },
        basicStyle(){
            window.scrollTo(100,600);
        },
        fontStyle(){
            window.scrollTo(100,900);
        },
        containerStyle(){
            window.scrollTo(100,1350);
        },
        behavior(){
            window.scrollTo(100,1480);
        },
        posStyle(){
            window.scrollTo(100,1480);
        },
        animation(){
            window.scrollTo(100,1480);
        },
        top(){
            window.scrollTo(100,0);
        }
        
    }
}
</script>

<style scoped>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
</style>